<template>
  <div>
    <Table :arr="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #mytd="{ res: obj2, Ind: index }">
        <td>{{ obj2.id }}</td>
        <td>{{ obj2.goods_name }}</td>
        <td>{{ obj2.goods_price }}</td>
        <td>
          <input
            class="tag-input form-control"
            type="text"
            v-if="obj2.inputVisible"
            v-model="obj2.inputValue"
            @keyup.enter="enterFn(obj2)"
            v-focus
            @keyup.esc="esc(obj2)"
          />
          <button
            if-else
            class="btn btn-primary btn-sm add-tag"
            @click="fn(obj2)"
          >
            +Tag
          </button>
          <span
            class="badge badge-warning"
            v-for="(str, index) in obj2.tags"
            :key="index"
            >{{ str }}</span
          >
        </td>
        <td><button @click="del(index)">删除</button></td>
      </template>
    </Table>
  </div>
</template>

<script>
import Table from "../components/Table";
export default {
  components: {
    Table,
  },
  data() {
    return {
      list: [],
    };
  },
  async created() {
    const res = await this.$axios({
      url: "/api/goods",
    });
    console.log(res.data.data);
    this.list = res.data.data;
  },
  methods: {
    fn(obj2) {
      obj2.inputVisible = true;
    },
    enterFn(obj2) {
      if (obj2.inputValue == 0) {
        alert("fa");
      } else {
        obj2.tags.push(obj2.inputValue);
        obj2.inputVisible = false;
        obj2.inputValue = "";
      }
    },
    esc(obj2) {
      obj2.inputVisible = false;
    },
    del(index) {
      this.list.splice(index, 1);
    },
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
.badge {
  margin-left: 14px;
}
</style>